<template>
    <view class="content">
        <!--  -->
        <view class="headerBg">
            <uv-navbar title="预约桌台" leftIconColor="#fff" @leftClick="back"
                :titleStyle="'color:#fff;font-size: 38rpx;font-weight:bold'" bgColor="rgba(255,255,255,0)"></uv-navbar>
            <view class="" :style="'height:'+(menuTop+menuHeight)+'px;'"> </view>
            <image style=" width: 100%;position: absolute; left: 0;top: 0;" class="bg"
                src="/static/images/middle/bg.jpg" mode="widthFix"></image>
			
           <view class="goods">
               <view class="goodsName align-center">
                 {{detailData.name}} <text class="tag" v-if="detailData.time_all">{{detailData.time_all}}营业</text>
               </view>
               <view class="tagList align-center justify-start">
                   <text class="" v-for="(i,n) in detailData.label_arr" :key="n">{{i}}</text>
               </view>
               <view class="address justify-between align-start">
                   <text>地址：</text>
                   <view class="clamp2 flex1">
                       {{detailData.address}} 
           
                   </view>
                  <image class="mr15 " @click="$utils.dh(detailData.name, detailData.pointlat,detailData.pointlng)"  style="margin-left: 30rpx;" src="/static/images/middle/i8.png" mode="widthFix">
                  </image>
                  <image @click="$utils.call(detailData.mobile)"  src="/static/images/middle/i9.png" mode="widthFix"></image>
               </view>
           </view>
        </view>
  <!--      <view class="storeCate plr15">
            <view class="storeGoods">
                本店明星台球宝贝
            </view>
            <swiper class="swiper" style="height: 440rpx;" circular indicator-active-color="#2CB37B" :indicator-dots="indicatorDots"
                :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item style="" >
              
                </swiper-item>
            </swiper>
        </view> -->
		<view class="bgWhite">
		
			<view class="plr14 pb15">
				<view class="justify-between">
							<view v-for="(i,n) in  dateList" @click="changeDay(n)" :key="n" class="flex-col align-center justify-center dayItem"
							:style="dayFocus==n?'background: rgba(1,197,136,0.1);border: 2px solid #01C588;color: #01C588!important;':''"
							>
								{{i.time}}
								<text :style="dayFocus==n?'color: #01C588!important;':''">{{i.week}}</text>
							</view>
							 <view class="flex-col align-center justify-center">
							 	<image style="width: 54rpx;" src="../../static/images/middle/date.png" mode="widthFix"></image>
								<uv-icon  color="#B9B9B9;" name="arrow-down"></uv-icon>
							 </view>
				</view>
					<view class="moduleTitle">
					选择时间段	
					</view>
				<view class="justify-start align-center flex-wrap" >
					<block v-for="i in 23" >
					<view :class="((i<=hours)&&dayFocus==0)?'mt10 dateItem disabled':focusd==i?'mt10 dateItem focusd':'mt10 dateItem'"  @click="choseItem(i)" >
						<text>{{i<10? '0'+i:i}}:00</text>~<text>{{(i+1)<10? '0'+(i+1):(i+1)}}:00</text>
					</view>
					</block>
				</view>	
				<view class="save_btn" @click="chose">
					立即预约
				</view>
			</view>	
		</view>
		
      <uv-popup ref="popup" bgColor="none" mode="center">
          <view class="flex-col align-center">
              <view class="bgWhite popcontent flex-col ">
                  <view class="pt15 plr18 ">
                      <view class="mb20 popTitle">
                          立即选他
                      </view>
                     
                  </view>
                  <view class="poprule align-center justify-center"> 
                  您下单后，助教会立即前往您所在的台桌
                  <br />
                  教您打球，并开始计时
                      <br />
                  结束后，统一在前台结账
                  </view>
                  <view class="justify-between align-center allMoney buybtn">
                      <view class="" @click="close">
                          取消
                      </view>
                      <view class="buy" @click="subOrder">
                          立即下单
                      </view>
                  </view>
              </view>
              <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
          </view>
      </uv-popup>
       
    </view>
</template>

<script>
    export default {
        data() {
            return {

                chain: false,
                value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                

                categoryId: "",
                menuTop: uni.getStorageSync('menuInfo').menuTop,
                menuHeight: uni.getStorageSync('menuInfo').menuHeight,
				
                windowHeight: uni.getStorageSync('menuInfo').windowHeight,
                height: 0,
                attrData: 0,
                detailData:{},
                id:"",
                page:1,
				hours:new Date().getHours(),
				
				days:new Date().getDate(),
				focusd:null,
				dateList:[],
				dayFocus:0,
				shopid:""


            }
        },

        onReady() {
            // 模拟接口请求数据

            this.height = (this.windowHeight * 2 - 570) / 2
			

        },
        onLoad(opt) {
			this.getWeek()
            if(opt.id) this.id =opt.id
			if(opt.shopid) this.shopid = opt.shopid
            this.getDetail()
            
            // this.getCate(index)  
            

        },
        computed: {
            list2() {
                const _list = this.list[this.value]?.childrens;
                return _list ? _list : [];
            }
        },
        methods: {
			changeDay(n){
					this.dayFocus=n
					this.focusd=null
			},
			getWeek(){
				var today = new Date(); //获取当前日期
				this.dateList.push({
					fullDate:this.$utils.getDate(timestamp).fullDate,
					time:'今天',
					week:this.$utils.getWeek(today)
				})
				for(var i =0; i<4;i++){
					var tomorrow = new Date();
					tomorrow.setDate(today.getDate() + 1+i); //将日期设置为明天
					var timestamp = tomorrow.getTime(); //获取时间戳
					
				let dates = this.$utils.getDate(timestamp)
					
					this.dateList.push({
						time:dates.month+'.'+dates.date,
						week:this.$utils.getWeek(timestamp),
						fullDate:dates.fullDate
					})
				}
				
			},
            async getDetail(){
             let  data=await this.$api.getShopDetail({id:this.shopid})  
             console.log(data)
             this.detailData= data.detail
            },
            
            
            close() {
                this.$refs.popup.close()
            },
            click(e) {
                console.log(e)
            },
          
			chose(){
				if(!this.focusd) return uni.showToast({
					title:'请选择预约时间',
					icon:"none"
				})
				this.$refs.popup.open()
			},
            toMain(item) {
                /*  uni.navigateTo({
                      url: '/pages/problemMain/index?id=' + item.id
                  }) */
            },
            back() {
                uni.navigateBack()
            },
            change(index) {
                console.log('选项改变：', index)
                this.value = index;
            },
			choseItem(item){
				if(this.dayFocus>0){
					this.focusd=item
				}else{
					if(item>this.hours){
						this.focusd=item
					}
				}
					
			},
			async subOrder(){
				let str = this.focusd<10?'0'+this.focusd+":00":this.focusd+":00"
				let str1 = (this.focusd+1)<10?'0'+(this.focusd+1)+":00":this.focusd+1+":00"
				let arr=[
					this.dateList[this.dayFocus].fullDate+' '+str , this.dateList[this.dayFocus].fullDate+'  '+str1
				]
				console.log(arr)
			    const data =await this.$api.yuyueTable({id:this.id,time_arr:JSON.stringify(arr)})
				if(data.code==1){
					uni.showToast({
						title:'预约成功'
					})
					this.$refs.popup.close()
				}else{
					uni.showToast({
						title:data.msg,
						icon:'none'
					})
				}
			    console.log(data)
			}
        }
    }
</script>
<style scoped lang="scss">
    .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        height: 87rpx;
    }

    .item {
        padding: 22rpx 20rpx 22rpx 32rpx;
        font-weight: bold;

        color: #333333;

        image {
            width: 220rpx;
            height: 220rpx;
            border-radius: 15rpx;
            margin-right: 20rpx;
        }

        &-title {
            font-size: 32rpx;
        }

        &-content {

            font-size: 24rpx;
        }

        .choseRule {
            width: 99rpx;
            height: 46rpx;
            background: #FF4345;
            border-radius: 15rpx;
            text-align: center;
            line-height: 46rpx;
            font-size: 26rpx;
            color: #FFFFFF;
        }

    }

    .gap {
        padding: 0 30rpx;
    }

    .swiper {
        image {
            width: 100%;
            height: 300rpx;
        }


    }

   
    .goods {
        position: relative;
        z-index: 9;
        margin: 50rpx 25rpx 0;
        font-size: 24rpx;
        color: #FFFFFF;

        .goodsName {
            font-weight: bold;
            font-size: 34rpx;

        }

        .tag {
            min-width: 121rpx;
            text-align: center;
            height: 33rpx;
            background: #FEAB61;
            border-radius: 3rpx;
            display: inline-block;
            font-size: 22rpx;
            line-height: 33rpx;
            font-weight: 400;
            margin-left: 10rpx;
            box-sizing: border-box;
        }
    }

    .tagList {
        flex-wrap: wrap;
        margin: 14rpx 0 24rpx 0;

        text {
            margin-top: 10rpx;
            display: block;
            min-width: 118rpx;
            box-sizing: border-box;
            padding: 0 27rpx;
            line-height: 40rpx;
            height: 40rpx;
            background: rgba(0, 0, 0, .15);
            border-radius: 3rpx;
            margin-right: 6rpx;
            color: #fff;
            text-align: center;
            font-size: 22rpx;

        }
    }

    .address {
        image {
            width: 52rpx;
        }
    }

    .storeCate {
        background-color: #fff;
        border-radius: 35rpx 35rpx 0 0;
        position: relative;
        margin-top: -30rpx;
    }

    .storeGoods {
        font-weight: bold;
        font-size: 32rpx;
        line-height: 50rpx;
        color: #333333;
        position: relative;
        display: inline-block;
        line-height: 80rpx;
        margin-left:38rpx;
    }

    .storeGoods::before {
       width: 8rpx;
       height: 29rpx;
       background: #01C588;
       border-radius: 4rpx;
        position: absolute;
        clear: both;
        content: '';
        bottom: 0;
        left: -28rpx;
        top: 0;
        margin: auto;
    }
    .ellipsis{
            text{
                padding: 6rpx 13rpx;
                display: inline-block;
                
                
                border: 1px solid #D3D3D3;
                border-radius: 5rpx;
                margin-right: 10rpx;
                font-weight: 400;
                font-size: 24rpx;
                text-align: center;
                color: #888;
            }
                   
    }
    .desc{
        font-size: 23rpx;
        color: #333333;
        line-height: 43rpx;
    }
    .meeting,.choose{
        width: 164rpx;
        height: 52rpx;
        background: #FFFFFF;
        border-radius: 26rpx;
        border: 2rpx solid #2CB37B;
        font-weight: bold;
        font-size: 25rpx;
        color: #2CB37B;
        text-align: center;
        line-height: 52rpx;
    }
    .choose{
        color: #fff;
        background: #2CB37B;
    }
    .dataItem{
        padding: 10rpx;
        border-radius: 20rpx;
        .letImg{
            position: relative;
            width:205rpx;
            height: 205rpx;
            .tagStatus{
                align-items: center;
                display: flex;
                font-weight: 400;
                font-size: 20rpx;
                padding: 6rpx 9rpx 6rpx 15rpx;
                background: rgba(255,255,255,0.8);
                justify-content: center;
                width: auto;
                    display: inline-flex;
                    left: 8rpx;
                    position: absolute;
                    border-radius: 15rpx 0 0 15rpx;
                    bottom: 11rpx;
                    color: #111111;
                .point{
                    width: 8rpx;
                    height: 8rpx;
                    border: 1px solid #FFFFFF;
                    background-color: #25CE87;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 4rpx;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    .uv-tabs__wrapper__nav {
        justify-content: space-between;
    }
	.dateItem{
		width: 221rpx;
		height: 67rpx;
		margin-left: 10rpx;
		background: rgba(44,179,123,0);
		border-radius: 8rpx;
		border: 1px solid #D0D0D0;text-align: center;
		line-height: 67rpx;
		box-sizing: border-box;
	}
	.disabled{
	color: #BCBCBC!important;
		background: rgba(245, 245, 245, .1)!important;
		border-radius: 8rpx;
		
	}
	.focusd{
		background: rgba(44,179,123,0.1);
		font-weight: bold;
		font-size: 28rpx;
		color: #01C588;
		border: 1px solid #01C588;
	}
	.save_btn {
		width: 100%;
		height: 90rpx;
		margin-top: 20rpx;
		
	background: #01C588;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.dayItem{
		width: 113rpx;
		height: 120rpx;
		background: #F3F3F3;
		border-radius: 12rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #333333;
			
		text{
			font-weight: 400;
			font-size: 23rpx;
			color: #999999;
			line-height: 23rpx;
			margin-top: 10rpx;
		}
	}
	.moduleTitle {
	
		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		margin: 30rpx auto 0;
		
	    font-weight: bold;
	position: relative;
	}
	.popcontent{
	    height: 521rpx;
	    align-items: center;
	}
	.poprule{
	    width: 574rpx;
	    height: 226rpx;
	    background: #F5F5F5;
	    border-radius: 10rpx;
	    font-size: 26rpx;
	    color: #333333;
	    line-height: 53rpx;
	    margin-bottom: 40rpx;
	    text-align: center;
	}
	.buybtn{
	    padding: 0;
	    width: 574rpx;
	    view{
	        width: 280rpx;
	        height: 64rpx;
	        line-height: 64rpx;
	        font-size: 30rpx;
	        color: #2CB37B;
	        border-radius: 32rpx;
	        border: 4rpx solid #2CB37B;
	        text-align: center;
	    }
	    .buy{
	        color: #fff;
	        background-color: #2CB37B;
	        
	        
	    }
	}
</style>